import { ref } from '@vue/reactivity'
import { onMounted } from 'vue'
import { inBrowser } from './../../utils/index'

type ScrollElement = HTMLElement | Window

const overflowScrollReg = /scroll|auto/i
const defaultRoot = inBrowser ? window : undefined

function isElement (node:Element) {
  const ELEMENT_NODE_TYPE = 1
  return (
    node.tagName !== 'HTML' &&
    node.tagName !== 'BODY' &&
    node.nodeType === ELEMENT_NODE_TYPE
  )
}

export function getScrollParent (
  el:Element,
  root:ScrollElement | undefined = defaultRoot,
) {
  let node = el

  while (node && node !== root && isElement(node)) {
    const { overflowY } = window.getComputedStyle(node)
    if (overflowScrollReg.test(overflowY)) {
      return node
    }
    node = node.parentNode as Element
  }
  return root
}

export function useScrollParent (
  el: Element | undefined,
  root:ScrollElement|undefined = defaultRoot,
) {
  const scrollParent = ref<Element|Window>()

  onMounted(() => {
    if (el) {
      scrollParent.value = getScrollParent(el, root)
    }
  })

  return scrollParent
}
